<template>
    <div class="factory">
        <div class="seachParam">
            <el-form size="mini" :inline="true" :model="form" class="demo-form-inline">
                <!-- <el-form-item label="楼盘名称：">
                    <el-input v-model="form.houseName"></el-input>
                </el-form-item> -->
                <el-form-item label="电话：">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="微信号：">
                    <el-input v-model="form.wx"></el-input>
                </el-form-item>
                <!-- <el-form-item label="送货地址：">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="航班号：">
                    <el-input v-model="form.flightNum"></el-input>
                </el-form-item>
                <el-form-item label="到达地点：">
                    <el-input v-model="form.arriveAddress"></el-input>
                </el-form-item>
                <el-form-item label="到达时间：">
                    <el-input v-model="form.arriveDate"></el-input>
                </el-form-item>
                <el-form-item label="同行人数：">
                    <el-input-number v-model="form.peopleCount" :min="1" :max="1000" label="同行人数"></el-input-number>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <!-- <el-button type="primary" @click="add">添加预约到访信息</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <el-table
            stripe
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <div class="box-card-box">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>接待经理</span>
                            </div>
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="姓名：">
                                    <span>{{ props.row.managerName }}</span>
                                </el-form-item>
                                <el-form-item label="性别：">
                                    <span>{{ props.row.managerSex }}</span>
                                </el-form-item>
                                <el-form-item label="电话：">
                                    <span>{{ props.row.managerMobile }}</span>
                                </el-form-item>
                                <el-form-item label="微信：">
                                    <span>{{ props.row.managerWx }}</span>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>接送司机</span>
                            </div>
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="姓名：">
                                    <span>{{ props.row.driverName }}</span>
                                </el-form-item>
                                <el-form-item label="性别：">
                                    <span>{{ props.row.driveSex }}</span>
                                </el-form-item>
                                <el-form-item label="电话：">
                                    <span>{{ props.row.driverMobile }}</span>
                                </el-form-item>
                                <el-form-item label="微信：">
                                    <span>{{ props.row.driverWx }}</span>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="houseName"
                label="楼盘名称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="mobile"
                label="电话"
                width="110">
            </el-table-column>
            <el-table-column
                prop="wx"
                width="110"
                label="微信号">
            </el-table-column>
            <el-table-column
                prop="address"
                width="110"
                label="送货地址">
            </el-table-column>
            <el-table-column
                prop="flightNum"
                label="航班号">
            </el-table-column>
            <el-table-column
                prop="arriveAddress"
                label="到达地点">
            </el-table-column>
            <el-table-column
                prop="arriveDate"
                label="到达时间">
            </el-table-column>
            <el-table-column
                prop="peopleCount"
                width="78"
                label="同行人数">
            </el-table-column>
            <el-table-column
                width="200"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="productInfoClick(scope.row)" type="text" size="small">产品详情</el-button>
                    <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="giftAdd(scope.row)" type="text" size="small">赠品</el-button>
                    <el-button @click="quotation(scope.row)" type="text" size="small">报价单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="产品详情"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <div>
                <div class="info-list">
                    <p class="title">意向产品：上传</p>
                    <upload :dataList="{
                        type: 12,
                        userId: userId
                    }" :id="id" :productInfo="true" />
                </div>
                <div class="info-list">
                    <p class="title">选定产品：上传</p>
                    <upload :dataList="{
                        type: 13,
                        userId: userId,
                    }" :id="id" :productInfo="true" />
                </div>
                <div class="info-list">
                    <p class="title">成交资料：上传</p>
                    <upload :dataList="{
                        type: 14,
                        userId: userId
                    }"  :id="id" :productInfo="true" />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="赠品"
            :visible.sync="showGift"
            width="30%">
            <span>
                <el-input v-model="giftVal" placeholder="请输入赠品内容"></el-input>
                <ul class="giftValList pt_10 pl_15">
                    <li v-for="(item,n) in giftsList" :key="n">
                        <span class="zeng">增</span>
                        {{item.giftName}}
                    </li>
                </ul>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showGift = false">取 消</el-button>
                <el-button type="primary" @click="handleCloseGift">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="报价单"
            :visible.sync="showBjd"
            width="30%">
            <span>
                <el-upload
                    class="upload-demo"
                    action="/api/file/upload"
                    :headers="headers"
                    :data="dataList"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showBjd = false">取 消</el-button>
                <el-button type="primary" @click="showBjd = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {formatDate} from '@/assets/js/utils.js'
    import upload from '@/components/upload'
    export default {
        name: 'factory',
        data() {
            return {
                userId:'',
                id: '',
                tableData: [],
                form: {
                    mobile: '',
                    wx: '',
                    // houseName: '',
                    // address: '',
                    // flightNum: '',
                    // arriveDate: '',
                    // arriveAddress: '',
                    // peopleCount: '',
                },
                dialogVisible:false,

                showGift: false,
                giftVal: '',
                dataInfo: {},

                showBjd: false,
                headers:{},
                fileList: [],
                dataList:{type:11,userId:''},
                giftsList: [],
            }
        },
        components: {
            upload
        },
        created () {
            this.headers = {Authorization:localStorage.Authorization};
            this.getList();
        },
        methods: {
            getList() {
                let param = this.form;
                this.$api.furnitureList({param},res=>{
                    console.log('res', res);
                    let list = res.list;
                    list.map(e=>{
                        e.arriveDate = formatDate('yyyy-MM-dd HH:mm:ss', new Date(e.arriveDate));
                        return e;
                    })
                    
                    this.tableData = list;
                });
            },
            // 查询
            onSubmit() {
                console.log('submit!');
                this.getList();
            },
            // 产品详情
            productInfoClick(item){
                console.log('item',item);
                this.userId = item.userId;
                this.id = item.id;
                this.dialogVisible = true;
            },
            // 修改
            update(item){
                this.$router.push({path:'/factoryAdd',query:{mobile:item.mobile}})
            },
            handleClose(){
                this.dialogVisible = false;
            },
            add(){
                this.$router.push('/factoryAdd')
            },
            // 赠品
            giftAdd (item) {
                this.showGift = true;
                this.dataInfo = item;
                this.giftVal = "";
                this.getGiftList();
            },
            handleCloseGift () {
                this.showGift = false;
                let dataInfo = this.dataInfo;
                let param = {
                    id: dataInfo.id,
                    userId: dataInfo.userId,
                    giftName: this.giftVal,
                };
                if(this.giftVal ==''){
                    this.$message('赠品内容不能为空！');
                    return;
                }
                this.$api.giftAdd({param},res=>{
                    console.log('res', res);
                    
                });
            },
            // 报价单
            quotation(item) {
                this.showBjd= true;
                this.dataInfo = item;
                this.dataList.userId = item.userId;
                this.getFileList();
            },
            // handleCloseBjd(){

            // },
            getFileList() {
                let param = this.dataList;
                this.$api.fileList({param},res=>{
                    let list = res.list;
                    list.map(e=>{
                        e.url = e.filePath;
                        e.name = e.fileName;
                        return e;
                    });
                    this.fileList = list;
                });
            },
            getGiftList(){
                let param = {
                    userId: this.dataInfo.userId
                };
                this.$api.giftList({param},res=>{
                    console.log(res);
                    this.giftsList = res.gifts;
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                let id = file.id;
                let param = {
                    id: id
                }
                this.$api.fileDelete({param},()=>{
                    this.$message.success('删除成功！')
                    this.getFileList();
                })
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }
        },
    }
</script>

<style lang="less" scoped>
/deep/.el-dialog__body{
    padding-top: 0px;
}
/deep/.el-table__expanded-cell{
    padding: 20px;
}
.box-card-box{
    display: flex;
    justify-content: space-between;
    .box-card{
        width: 49%;
        .el-form-item{
            margin-right: 15px;
            /deep/.el-form-item__label{
                padding-right: 5px;
            }
        }
    }
}
.info-list{
    .title{
        line-height: 32px;
    }
}
.giftValList{
    li{
        .zeng{
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
            border-radius: 6px;
            background: #409EFF;
        }
    }
}
</style>